<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

</head>
<body>

<div th:fragment="content">
    <div id="app" class="content_container">
        <div v-for="item in gridData.records" class="post" >
            <h2 class="post-title"><a
                    href="https://www.haomwei.com/emotion/summer.html">{{ item.title }}</a></h2>
            <div class="post-meta">{{item.createTime | moment}}</div>
            <div
                    class="post-content">
                {{ item.content }}
            </div>
            <p class="readmore"><a href="https://www.haomwei.com/emotion/summer.html">阅读更多</a></p>
        </div>
        <nav class="page-navigator">
            <span class="page-number current">1</span>
            <a class="page-number" href="/page/2/">2</a>
            <a class="page-number" href="/page/3/">3</a>
            <span class="space">…</span>
            <a class="page-number" href="/page/20/">20</a>
            <a class="extend next" href="/page/2/" rel="next">下一页</a></nav>
    </div>

    <script th:inline="javascript">

        var demo = new Vue({
            el: '#app',
            data: {
                gridData: [],
                apiUrl: /*[[@{/list}]]*/
            },
            ready: function() {
                this.getCustomers()
            },
            methods: {
                getCustomers: function() {
                    this.$http.get(this.apiUrl)
                            .then((response) => {
                        this.$set('gridData', response.data)
                }).catch(function(response) {
                        console.log(response)
                    })
                }
            }
        })

        Vue.filter('moment', function (value, formatString) {
            formatString = formatString || 'YYYY年MM月DD日';
            return moment(value).format(formatString);
        });
    </script>

</div>

</body>

</html>